<template>
  <div class="common-frame">
    <div class="left-menu">
      <el-menu :default-openeds="['1','2','3']" :default-active="'components/vendormgt/questionary/questionnaire'" class="el-menu-vertical-demo" @select="val=>{loadUserPage(val)}" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">信息档案</span>
            </template>
            <el-menu-item index="components/vendormgt/questionary/questionnaire">调查表信息</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/vendorcategory/vdCategory">主供品类</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/rfiItemList">RFI</el-menu-item>
            <!-- <el-menu-item index="components/vendormgt/vsp/common/online1">RFI</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">辅供品类</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">信息扩展</el-menu-item> -->
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">开发档案</span>
            </template>
            <el-menu-item index="components/vendormgt/vsp/common/dlvapply/vendorDlvApply">开发申请</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/npc/vendorNpcTask">物料认证</el-menu-item>
          </el-submenu>
           <el-menu-item index="components/vendormgt/vsp/common/vendorcompany/company">关联公司</el-menu-item>
           <el-menu-item index="components/vendormgt/vsp/common/vendormaterial/vendorMaterial">货源关系</el-menu-item>
           <el-menu-item index="components/vendormgt/vsp/common/vendorpurorg/vendorPurOrg">采购组织关系</el-menu-item>
          <!-- <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">开发档案</span>
          </template>
            <el-menu-item index="components/vendormgt/vsp/common/online2">开发申请</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online">工厂验证</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">样品试制</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">转正申请</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">冻结，淘汰申请</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">归档资料</el-menu-item>
          </el-submenu> -->
          <!-- <el-menu-item index="components/vendormgt/vsp/common/online1"><i class="el-icon-setting"></i>关联公司</el-menu-item>
          <el-menu-item index="components/vendormgt/vsp/common/online1"><i class="el-icon-setting"></i>货源关系</el-menu-item>
          <el-menu-item index="components/vendormgt/vsp/common/online1"><i class="el-icon-setting"></i>采购组织关系</el-menu-item>
          <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">业务日志</span>
          </template>
            <el-menu-item index="components/vendormgt/vsp/common/online1">开发业务日志</el-menu-item>
            <el-menu-item index="components/vendormgt/vsp/common/online1">资料变更业务日志</el-menu-item>
          </el-submenu> -->
        </el-menu>
    </div>
    <div class="right-main">
        <component v-bind:is="componentname" :data="paramsData" style="padding:20px;background:#fff;" :readonly="true"></component>
    </div>
  </div>
</template>
<script>
/**
 * loadUserPage(url,params)，第一个参数为页面路径，第二个为子页面需要的参数，可在子页面用this.$attrs.data获取
 * default-active 为默认展开的菜单，el-menu-item标签上的index为跳转的页面路径
 * 点击菜单会自动执行select方法，可在方法里传参
 *
*/
  export default {
    data() {
      return {
        componentname:'',
        paramsData:{},
        isCollapse: false,
      };
    },
    created(){
      this.paramsData={id:123};
      this.loadUserPage('components/vendormgt/questionary/questionnaire');
    },
    methods: {
      loadUserPage(name,id){
        import(`@/${name}.vue`).then((FBshare)=>{
          this.componentname=FBshare.default;
        })
      }
    }
  }

</script>

<style scoped>
.el-menu-item.is-active{
    background: rgb(218, 31, 36);
    color: #fff;
  }
.common-frame{
  clear: both;
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
.left-menu{
  width: 225px;
  float: left;
  list-style: none;
  overflow: auto;
  height: 100vh;
}
.el-submenu .el-menu-item{
  padding-left:55px!important;
  height:100%;
}
.right-main{
  width: 100%;
  float: right;
  list-style: none;
  height: 100vh;
  padding-left:240px;
  margin-left: -240px;
  overflow: auto;
}
</style>
